import React from 'react';
import {Layout, Select, DatePicker, Input, Table, Menu, Dropdown} from 'antd'
import {CopyOutlined, FileExcelOutlined, SearchOutlined} from '@ant-design/icons';

import './Check.css'
import axios from "../../../util/http";
import * as url from "../../../util/api";
const { Option } = Select;
const {Search} = Input


function handleChange(value) {
    console.log(`selected ${value}`);
    // selectValue =`selected ${value}`
}
function onChange(pagination, filters, sorter, extra) {
    console.log('params', pagination, filters, sorter, extra);
}
function onChangeA(date, dateString) {
    console.log(date, dateString);
}
//客户对账
class ClientReconciliation extends React.Component {
    constructor(props){
        super(props)
        this.state={

            getData:'',
            nextData:'',
        }
    }
    componentDidMount() {
        axios({
            url:url.getKeHuName,
            method:'get',
        }).then(res=>{
            // console.log(res.data.data)
            this.setState({
                getData:res.data.data,
                nextData:res.data.data,
            })
        })
    }
    searchData=(value)=>{
        // console.log(value)
        let Data = this.state.getData
        if (value===''){
            let next = this.state.nextData
            this.setState({
                getData:next
            })
        } else{
            let newData = Data.filter(item=>{
                return item.dealersName===value
            })
            this.setState({
                getData:newData
            })
        }

    }


     PDetails=(xx,yx,e)=> {
        e.preventDefault()

    }
     dropdownMenu=(text, record)=> {
        const menu = (
            <Menu>
                <Menu.Item>
                    <a target="_blank" rel="noopener noreferrer" onClick={this.PDetails.bind(this,text,record)} href='#'>
                        <CopyOutlined style={{marginRight:'10px'}}/>对账初始化
                    </a>
                </Menu.Item>
            </Menu>
        );
        return(
            <Dropdown overlay={menu}>
                <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
                    . . .
                </a>
            </Dropdown>
        )
    }
    render() {
        const columns = [
            {
                title: '经销商名称',
                dataIndex: 'dealersName',
                align:'center',
            },
            {
                title: '上次对账日期',
                dataIndex: 'preTime',
                align:'center',
            },
            {
                title: '本次对账周期',
                dataIndex: 'benCiTime',
                align:'center',
            },
            {
                title: '账单情况',
                dataIndex: 'orderDialte',
                align:'center',
            },
            {
                title: '操作',
                key: 'action',
                render: (text, record) => (
                    <span>
                {this.dropdownMenu(text, record)}
            </span>
                ),
            },
        ];
        return (
            <div>
                <Layout style={{backgroundColor:'white'}}>
                    <div className='topBox'>
                        <div className='topLeft'>
                            <Select bordered={false} style={{width:120}} defaultValue="全部"  onChange={handleChange}>
                                <Option value="全部">全部</Option>
                                <Option value="未出账单">未出账单</Option>
                                <Option value="已出账单">已出账单</Option>
                                <Option value="未初始化">未初始化</Option>
                            </Select>
                            <Search
                                placeholder="请输入客户名称"
                                onSearch={this.searchData}
                                style={{width:200}}
                            />
                            <div>
                                <span>对账日期：</span>
                                <DatePicker onChange={onChangeA} />
                            </div>

                            <div>
                                <span>账期类型：</span>
                                <Select  style={{width:80}} defaultValue="全部"  onChange={handleChange}>
                                    <Option value="全部">全部</Option>
                                </Select>
                            </div>

                            <div>
                                <span>业务员：</span>
                                <Select  style={{width:140}} defaultValue="全部"  onChange={handleChange}>
                                    <Option value="全部">全部</Option>
                                    <Option value="易订货演示账单">易订货演示账单</Option>
                                    <Option value="杨经理">杨经理</Option>
                                    <Option value="张经理">张经理</Option>
                                    <Option value="王经理">王经理</Option>
                                    <Option value="毛经理">毛经理</Option>
                                </Select>
                            </div>

                        </div>
                        <div className='topRight'>
                            <Select  style={{width:140,marginRight:'20px'}} defaultValue="对账初始化"  onChange={handleChange}>
                                <Option value="对账初始化">单个初始化</Option>
                                <Option value="对账初始化">批量初始化</Option>
                            </Select>
                        </div>
                    </div>
                </Layout>
                <div className='tableBox'>
                    <Table columns={columns} dataSource={this.state.getData} onChange={onChange} />
                </div>
            </div>
        );
    }
}

export default ClientReconciliation;